.rt-homepage-container {
  @width-percentage: 78%;
  & > .rt-top-box {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: center;
    background-color: #fff;
    .rt-wrapper {
      width: @width-percentage;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .rt-nav-box {
        font-size: 16px;
        color: #474E5D;
        font-family: FZLanTingHei-R-GBK;
        display: flex;
        & > div {
          padding: 12px 28px;
        }
        .rt-active {
          background-color: #EBF2F7;
        }
      }
    }
  }
  .cm-scrollable-container {
    margin-top: 2px;
    display: flex;
    justify-content: center;
    background-color: #F2F2F2;
    overflow: auto;
    .rt-wrapper {
      width: @width-percentage;
      display: flex;
      .rt-left {
        width: 26%;
        background-color: #EBF2F7;
        .rt-user-box {
          background-color: #42A2E8;
          color: #fff;
          font-size: 12px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 10px 8px;
          .rt-lft {
            display: flex;
            align-items: center;
            & > div {
              padding-left: 8px;
            }
            .rt-above {
              & > span {
                padding-right: 8px;
              }
            }
            .rt-balance {
              font-size: 16px;
            }
          }
          .rt-rgt {
            display: flex;
            flex-direction: column;
            i {
              border: 1px solid #fff;
              border-radius: 50%;
              padding: 5px 0;
              margin-bottom: 4px;
            }
          }
        }
        // deprecated
        // .rt-goods-box {
        //   display: flex;
        //   justify-content: space-around;
        //   background-color: #fff;
        //   .rt-left-side {
        //     border-color: red;
        //     & > div {
        //       padding: 8px 0;
        //       & + span {
        //         color: #474E5D;
        //       }
        //       span {
        //         font-size: 18px;
        //         padding: 4px 22px;
        //         border-radius: 4px;
        //         background-color: #ED5E69;
        //         color: #fff;
        //       }
        //     }
        //     .rt-name {
        //       font-size: 16px;
        //       color: #474E5D;
        //     }
        //   }
        //   .rt-right-side {
        //     display: flex;
        //     flex-direction: column;
        //     align-items: flex-end;
        //     & > div {
        //       padding: 4px 0;
        //       font-size: 30px;
        //       color: #ED5E69;
        //       font-weight: bold;
        //     }
        //     & > span {
        //       color: #474E5D;
        //     }
        //   }
        // }
        .rt-goods-box {
          border: 1px solid #E3ECF6;
          padding: 10px 18px;
          &.rt-active {
            background-color: #fff;
            .rt-middle-level {
              & > span {
                background-color: #ED5E69;
              }
              i {
                color: #ED5E69;
              }
            }
          }
          & > div {
            display: flex;
            justify-content: space-between;
            align-items: center;
          }
          .rt-top-level {
            color: #474E5D;
            & > span:first-child {
              font-size: 16px;
            }
          }
          .rt-middle-level {
            padding: 4px 0;
            span {
              padding: 4px 26px;
              border-radius: 4px;
              background-color: #4FD7B6;
              color: #fff;
              font-size: 18px;
            }
            i {
              font-size: 26px;
              color: #4FD7B6;
              font-weight: bold;
            }
          }
          .rt-bottom-level {
            color: #474E5D;
          }
        }
      }
      .rt-right {
        flex: 1;
        background-color: #fff;
        padding: 0 16px;
        .rt-top-box {
          display: flex;
          justify-content: space-between;
          .rt-left-side {
            font-size: 30px;
            padding-bottom: 4px;
            .rt-name {
              color: #474E5D;
            }
            i {
              font-weight: bold;
              color: #ED5E69;
              & + span {
                color: #ED5E69;
                font-weight: bold;
              }
            }
          }
          .rt-right-side {
            border: 1px solid #E5E9EE;
            border-bottom: none;
            color: #474E5D;
            display: flex;
            align-self: flex-end;
            .rt-active {
              color: #fff;
              background-color: #0D5BA9;
            }
            & > span {
              padding: 2px 28px;
              border-right: 1px solid #E5E9EE;
              &:last-child {
                border-right: none;
              }
            }
          }
        }
        .rt-chart-operate-box {
          border: 1px solid #EDEEF0;
          border-bottom: none;
          color: #474E5D;
          display: flex;
          justify-content: space-between;
          padding: 6px 24px 6px 12px;
          .rt-right-side {
            & > span {
              padding: 0 6px;
            }
          }
        }
        .rt-chart-box {
          border: 1px solid red;
          height: 280px;
        }
        .rt-title {
          color: #474E5D;
          font-size: 16px;
          padding: 4px 0;
        }
        .rt-double-separator-box {
          border: 1px dashed #E6E6E6;
          border-left: none;
          border-right: none;
          height: 6px;
          & + div {
            margin-top: 10px;
          }
        }
        .rt-deal-operate-box {
          display: flex;
          border: 1px solid #E3ECF6;
          margin-bottom: 10px;
          .rt-goods {
            flex: 1;
            display: flex;
            flex-direction: column;
            padding: 10px;
            color: #9C9FA1;
            .rt-name {
              font-size: 14px;
              color: #474E5D;
              & + span {
                font-size: 24px;
                color: #474E5D;
                font-weight: bold;
              }
            }
          }
          .rt-stepper-box {
            flex: 3;
            background-color: #f5f9fc;
            display: flex;
            flex-direction: column;
            justify-content: center;
            .rt-amount {
              display: flex;
              padding: 0 8px;
              padding-bottom: 4px;
              & > span {
                padding-right: 4px;
                display: flex;
                align-items: center;
              }
              .rt-stepper {
                flex: 1;
                display: flex;
                border: 1px solid #E3ECF6;
                & > span {
                  width: 12%;
                  text-align: center;
                  color: #7A7980;
                  background-color: #E3ECF6;
                  padding: 4px 0;
                  border-right: 1px solid rgba(255, 255, 255, 0.5);
                  &:last-child {
                    border-right: none;
                  }
                }
                & > div {
                  flex: 1;
                  background-color: #fff;
                  display: flex;
                  align-items: center;
                  padding-left: 8px;
                }
                .rt-active {
                  background-color: #0D5BA9;
                  color: #fff;
                }
              }
            }
            .rt-profit-loss {
              display: flex;
              padding: 0 8px;
              padding-top: 4px;
              & > div {
                flex: 1;
                display: flex;
                align-items: center;
                .rt-up-down {
                  display: flex;
                  flex: 1;
                  .rt-display-box {
                    background-color: #fff;
                    flex: 1;
                    display: flex;
                    align-items: center;
                    padding-left: 8px;
                    & + div {
                      display: flex;
                      flex-direction: column;
                      .anticon-caret-up {
                        border-bottom: 1px solid #fff;
                      }
                    }
                  }
                }
              }
              input + span {
                padding: 0 8px 0 4px;
              }
              .rt-profit-box {
                padding-right: 4px;
                // todo
              }
              .rt-loss-box {
                // todo
              }
            }
          }
          .rt-check-box {
            flex: 2;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            color: #9C9FA1;
            padding: 10px 8px;
            input + span {
              padding-left: 4px;
            }
            .rt-cost {
              display: flex;
              align-items: center;
              justify-content: flex-end;
              font-size: 14px;
              color: #474E5D;
              & > span {
                font-size: 18px;
                color: #0D5BA9;
              }
            }
            .rt-middle-box {
              display: flex;
              justify-content: space-between;
              align-items: center;
              .rt-rgt {
                display: flex;
                flex-direction: column;
                align-items: flex-end;
                color: #474E5D;
                padding-bottom: 6px;
              }
            }
          }
          .rt-operate-box {
            flex: 1;
            font-size: 16px;
            display: flex;
            flex-direction: column;
            background-color: #CFCFCF;
            color: #fff;
            & > div {
              &:first-child {
                border-bottom: 1px solid rgba(255, 255, 255, 0.5);
                &:hover {
                  background-color: #ED5E69;
                }
                & + div {
                  &:hover {
                    background-color: #4FD7B6;
                  }
                }
              }
              flex: 1;
              display: flex;
              justify-content: center;
              align-items: center;
            }
          }
        }
      }
    }
  }
  .rt-footer-box {
    font-size: 12px;
    display: flex;
    justify-content: center;
    padding: 12px 0;
    background-color: #474E5D;
    color: #fff;
  }
}